@import '../../assets/public.less';
@import '../../assets/reset.less';
.index_main {
    background-color: #403AA3;
    width: 100%;
    min-width: 1280px;
    height: 100%;
    .sowingmap {
        .el-carousel {
            overflow: hidden;
            .sowingMap_box {
                height: 100%;
                width: 100%;
                background-size: 100% 100%;
                background-position: center;
            }
        }
    }
    .sowingMap_footer {
        width: 100%;
        background-color: @DaiDackGroundColor1;
        .sowingMap_footer_main {
            .breadth();
            height: @header_height;
            line-height: @header_height;
            .Scavengingfloating();
            display: flex;
            justify-content: center;
            .sowingMap_footer_list {
                width: 25%;
                .sowingMap_footer_url {
                    display: inline-block;
                    width: 80%;
                    height: @header_height;
                    line-height: @header_height;
                    overflow: hidden;
                    text-align: center;
                }
                .sowingMap_footer_icon {
                    float: right;
                    margin-right: 25px;
                }
            }
        }
    }
    .indexcommodity_main {
        .breadth();
        background-color: #f8f9fc;
        margin: 25px auto;
        border: solid 1px @DaiDorderColor1;
        box-shadow: 1px 1px 8px @DaiDorderColor1;
        .indexcommodity_header {
            .Scavengingfloating();
            .indexcommodity_header_list {
                color: @DaiDackGroundColor5;
                font-size: @h3FontSize;
                float: left;
                .list_width();
            }
        }
        .indexcommodity_nav {
            border-bottom: solid 1px @DaiDackGroundColor1;
            border-top: solid 1px @DaiDackGroundColor1;
            background-color: #edeef3;
            height: 30px;
            line-height: 30px;
            span {
                margin-left: 25px;
                padding-left: 10px;
                border-left: solid 2px @DaiDackGroundColor5;
                color: @DaiDackGroundColor5;
                font-size: @h5FontSize;
            }
        }
        .indexcommodity_box {
            .Scavengingfloating();
            cursor: pointer;
            border-bottom: solid 1px @DaiDackGroundColor1;
            color: @DaiFontSizeColor4;
            .indexcommodity_box_list {
                position: relative;
                .list_width();
                float: left;
                font-size: @h4FontSize;
                .list_name {
                    color: @DaiFontSizeColor5;
                }
                .rise {
                    color: @DaiOtherColor2;
                }
                .fall {
                    color: @DaiOtherColor1;
                }
                .list_badge {
                    background-color: @DaiDackGroundColor8;
                    border-radius: 2px;
                    color: #fff;
                    display: inline-block;
                    font-size: @h6FontSize;
                    height: @h4FontSize;
                    line-height: @h4FontSize;
                    padding: 0 4px;
                    text-align: center;
                    white-space: nowrap;
                    border: 1px solid #fff;
                    position: absolute;
                    top: 10px;
                    right: 70px;
                    -webkit-transform: translateY(-50%) translateX(100%);
                    transform: translateY(-50%) translateX(100%);
                }
            }
        }
    }
    .introduction {
        .breadth();
        margin-top: 50px;
        .substance {
            .Scavengingfloating();
            .substance_text {
                display: inline-block;
                margin-top: 85px;
                h1 {
                    font-size: @h1FontSize;
                    color: @DaiFontSizeColor6;
                    line-height: 65px;
                    font-weight: 900;
                }
                p {
                    font-size: @h3FontSize;
                    color: @DaiFontSizeColor7;
                    line-height: 24px
                }
            }
            .substance_img {
                display: inline-block;
                img {
                    width: 350px;
                    height: auto;
                }
            }
            div:first-child {
                float: left;
            }
            div:last-child {
                float: right;
            }
            ;
        }
    }
    .Hint_content {
        overflow: hidden;
        position: relative;
        height: 870px;
        .Hint_box {
            height: 870px;
            .Editmap {
                .breadth();
                overflow: visible;
                top: 0;
            }
            .Hint_img {
                position: relative;
                left: -640px;
                visibility: visible;
            }
            .download_mian {
                .breadth();
                position: relative;
                top: -420px;
                color: @DaiFontSizeColor6;
                text-align: center;
                .download_header {
                    font-size: @h1FontSize;
                    font-weight: 900;
                    line-height: 60px;
                }
                .download_text {
                    font-size: @h3FontSize;
                    line-height: 60px;
                }
                img {
                    margin: 0 auto;
                }
                .download_box {
                    width: 705px;
                    margin: 20px auto 0 auto;
                }
                .download_list {
                    float: left;
                    a {
                        font-size: @h5FontSize;
                        border-radius: 25px;
                        border: solid 1px @DaiDorderColor1;
                        padding: 5px 10px;
                        background-color: @DaiOtherColor1;
                    }
                }
                .ios {
                    margin-left: -30px;
                }
                .and {
                    margin-left: 80px;
                }
                .win {
                    margin-left: 135px;
                }
                .mac {
                    margin-left: 180px;
                }
            }
        }
    }
    .bannerCenter {
        padding:149px 0 159px;
        background: url('../../assets/image/index/2.jpg') no-repeat;
        background-size: 100% 100%;
        .bannerheader {
            text-align: center;
            
            h2 {
                font-size: 40px;
                letter-spacing: 1px;
                height:40px;
                line-height: 40px;
                color: #eeeff1;
                margin-bottom: 42px;
            }
            p {
                color: #ccd8f0;
                font-size: 16px;
                height: 16px;
                line-height: 16px;
            }
        }
        .hangqingWarp {
            padding-top: 110px;
            width: 1100px;
            margin: 0 auto;
            .nolistWarp {
                padding-top: 50px;
            }
            .nolist {
                color: #FFFFFF;
                text-align: center;
                padding-top: 20px;
                font-size: 20px;
            }
            .hangqwingul {
                .clearfix();
                li {
                    width: 320px;
                    margin:0px 20px 20px 0;
                    height: 93px;
                    background-color: #342C93;
                    border-radius: 5px;
                    float: left;
                    cursor: pointer;
                    transition: all 0.5s;
                    text-align: left;
                    padding-left: 30px;
                    overflow: hidden;
                    padding-top: 32px;
                    padding-bottom: 35px;
                    img{
                        width: 30px;
                        height: 30px;
                        float: left;
                    }
                   aside{
                    float: left;
                    padding-top: 15px;
                    padding-left: 30px;
                    text-align: left;
                    .priceNum{
                        color: #c9d7f1;
                        font-size: 24px;
                    }
                    p{
                        margin-bottom: 15px;
                    }
                    .title{
                        color: #fffeff;
                        font-size: 16px;
                    }
                    .changeRate{
                        font-size: 14px;
                    }
                    .rise {
                        color: #fe5955;
                    }
                    .fall {
                        color: #00bc80;
                    }
                    .yuedeng{
                        color: @DaiFontSizeColor14;
                        font-size:12px;
                    }
                    .allNum{
                        margin-top: 18px;
                        font-size: 12px;
                        color: #cbd7f0;
                    }
                }
                
                }
                li:hover {
//                  border: 1px solid #1e8495;
                    background-color: #2E2882;
                    box-shadow: 0px 0px 14px #5D57C3;
                }
            }
        }
    }
    .chooseIOAEX {
        min-width: 1280px;
        margin: 0 auto;
        padding: 160px 0 170px;
        background:url('../../assets/image/index/3.png') no-repeat;
        background-size:100% 100%;
        .chooseIOAEXHeader {
            width: 1280px;
            margin: 0 auto;
            text-align: center;
            h2 {
                font-size: 37px;
                color:#eee;
                height: 40px;
                line-height: 40px;
                letter-spacing: 1px;
                margin-bottom: 40px;
            }
            p {
                color: #cbd7f0;
                font-size: 18px;
            }
        }
        .fourImg {
            width: 1280px;
            margin: 99px auto 0;
            .fourLiWarp {
                .clearfix();
                li {
                    margin-right: 38px;
                    text-align: center;
                    padding: 70px 25px 0;
                    float: left;
                    width: 240px;
                    height: 405px;
                    font-size: @h4FontSize;
                    cursor: pointer;
                    transition: all 0.5s;
                    img{
                        width: 120px;
                        height: 140px;
                        margin-bottom: 42px;
                    }
                    h2 {
                        font-size: 24px;
                        line-height: 24px;
                        height: 24px;
                        margin-bottom: 26px;
                        color:#fffffd;
                    }
                    p{
                        line-height:30px;
                        color:#cbd7f0; 
                    }
                    &:hover{
                        box-shadow:1px 1px 1px 1px #605AC8,-1px -1px 1px 1px #605AC8;
                        box-shadow: 1px 1px 10px #635DCB;
                        background-color: #2E2882;
                    }
                }
            }
        }
    }
    .platform {
        width: 100%;
        padding: 90px 0 152px;
        background: url('../../assets/image/index/4.png') no-repeat;
        background-size:cover;
        .platformWarp {
            text-align: center;
            .platformHeader {
                h2 {
                    font-weight: 500;
                    color:#eee;
                    font-size: 40px;
                    letter-spacing: 1px;
                }
                p {
                    font-size: @h2FontSize;
                    color: #616A79;
                    line-height: 38px;
                }
            }
        }
        .fourImg {
            width: 1280px;
            margin: 0 auto;
            padding-top: 90px;
            .fourLiWarp {
                .clearfix();
                li {
                    float: left;
                    text-align: center;
                    width: 166px;
                    height: 42px;
                    margin-right: 56px;
                    cursor: pointer;
                    img {
                        width: 166px;
                        height: 42px;
                    }
                    h2 {
                        margin: 0 auto;
                        margin-top: 30px;
                        font-size: @h6FontSize;
                        width: 88px;
                        height: 32px;
                        line-height: 32px;
                        border-radius: 10px;
                        background-color: #fff;
                        cursor: pointer;
                    }
                }
                li:hover {
                    h2 {
                        color: #FFFFFF;
                    }
                }
                .codeImg {
                    width: 200px;
                    height: 200px;
                }
            }
        }
    }
}

.list_width() {
    width: 16%;
    text-align: center;
    height: 40px;
    line-height: 40px;
}